import React, { Component } from 'react'
import { Select, InputNumber, Row, Col, Button } from 'antd'

class Index extends Component {

    constructor(props) {
        super(props)
        this.state = {
            type: "",
            score: 0
        }
    }

    componentDidMount() {
        const typeList = ["singleChoice", 'multipleChoice', "fillInBlank"]
        const { type, score } = this.props
        let nextType = type
        let nextScore = score
        if (typeList.indexOf(type) < 0) { nextType = typeList[0] }
        if (isNaN(score)) { nextScore = 0 }
        this.setState({
            type: nextType,
            score: nextScore
        })
    }

    render() {
        const { onChange, index, className, deleted, canDel } = this.props
        return <div className={className}
            style={{
                boxSizing: 'border-box',
                padding: '16px',
                borderBottom: '1px #c0c0c0 solid',
                transition: '0.5s'
            }}
        >
            <Row style={{ display: 'flex', alignItems: 'center' }}>
                <Col style={{ width: '32px', textAlign: 'right', padding: '8px', boxSizing: 'border-box' }}>
                    <span>{index + 1}.</span>
                </Col>
                <Col style={{ marginRight: '16px' }}>
                    <span>题型：</span>
                    <Select value={this.state.type} style={{ width: '100px' }} onChange={(value) => {
                        this.setState({
                            type: value
                        }, () => { onChange(this.state) })
                    }}>
                        <Select.Option key="singleChoice" value="singleChoice">单选题</Select.Option>
                        <Select.Option key="multipleChoice" value="multipleChoice">多选题</Select.Option>
                        <Select.Option key="fillInBlank" value="fillInBlank">填空题</Select.Option>
                    </Select>
                </Col>
                <Col>
                    <span>分值：</span>
                    <InputNumber
                        value={this.state.score}
                        onChange={(value) => {
                            this.setState({
                                score: value
                            }, () => { onChange(this.state) })
                        }}
                        style={{ width: '100px' }}
                        min={0} />
                </Col>
                <Col style={{
                    marginLeft: 'auto',
                    marginRight: 0
                }}>
                    <Button size='small' disabled={canDel} danger={true} onClick={() => {
                        deleted()
                    }}>移除题目</Button>
                </Col>
            </Row>
            {this.props.children}
        </div>
    }
}

export default Index